import Tabs from 'antd/es/tabs';
import { useState } from 'react';
import { Collapse, TriggerPosition } from '../../components';
import { EViewType } from '../../store';
import './index.less';
import { DesignInput } from './design';
import { AuditDesignInput } from './audit-design';
import { AuditOrderInput } from './audit-order';

export function LeftPanel() {
    const [activeKey, setActiveKey] = useState<EViewType>(EViewType.Design);

    const items = [
        {
            label: '设计方案', key: EViewType.Design, children: <DesignInput />
        },
        {
            label: '审核方案', key: EViewType.AuditDesign, children: <AuditDesignInput />
        },
        {
            label: '审核订单', key: EViewType.AuditOrder, children: <AuditOrderInput />
        },
    ];

    return (
        <Collapse triggerPosition={TriggerPosition.Right} className='left-panel-collapse'>
             <Tabs activeKey={activeKey} onChange={(a) => setActiveKey(a as EViewType)} size='small' items={items} className='right-panel-tab' />
        </Collapse>

    )
}
